<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="{__CSS__}/element_ui.css"/>
    <link rel="stylesheet" href="{__CSS__}/style.css"/>
    <script src="{__JS__}/vue2.js"></script>
    <script src="{__JS__}/element_ui.js"></script>
    <script src="{__JS__}/axios.min.js"></script>
    <script src="{__JS__}/request.js"></script>
</head>
<body>
<!-- 组件导入 -->
{include file="/components/fileSelect"}
<div id="app">
    <div class="app-loading" v-if="pageLoading">
        <div class="app-loading__logo">
            <img src="{__IMG__}/logo.png"/>
        </div>
        <div class="app-loading__loader"></div>
        <div class="app-loading__title">{$title}</div>
    </div>
    <el-card class="box-card" v-else>
        <div slot="header" class="clearfix">
            <span>用户管理</span>
        </div>
        <div class="search-box">
            <el-form>
                <el-form-item label="用户来源">
                    <el-button-group>
                        <el-button :class="{'primary': searchForm.source_id == 0}" size="small" @click="checkTab(0)">全部</el-button>
                        <el-button :class="{'primary': searchForm.source_id == 2}" size="small" @click="checkTab(2)">微信小程序</el-button>
                        <el-button :class="{'primary': searchForm.source_id == 3}" size="small" @click="checkTab(3)">H5</el-button>
                        <el-button :class="{'primary': searchForm.source_id == 4}" size="small" @click="checkTab(4)">PC</el-button>
                        <el-button :class="{'primary': searchForm.source_id == 5}" size="small" @click="checkTab(5)">APP</el-button>
                    </el-button-group>
                </el-form-item>
            </el-form>
            <el-form :inline="true" :model="searchForm" class="demo-form-inline" style="margin-top: 20px;">
                <el-form-item label="用户等级">
                    <el-select v-model="searchForm.level_id" placeholder="请选择用户等级" size="small" clearable>
                        <el-option :label="item.title" :value="item.id" v-for="item in level" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户分组">
                    <el-select v-model="searchForm.group_id" placeholder="请选择用户分组" size="small" clearable>
                        <el-option :label="item.name" :value="item.id" v-for="item in group" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户标签">
                    <el-select v-model="searchForm.label_id" placeholder="请选择用户标签" size="small" multiple clearable>
                        <el-option :label="item.name" :value="item.value" v-for="item in label" :key="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="searchForm.phone" size="small"></el-input>
                </el-form-item>
                <el-form-item label="昵称">
                    <el-input v-model="searchForm.nickname" size="small"></el-input>
                </el-form-item>
                <el-form-item label="成交次数">
                    <el-col :span="11">
                        <el-input v-model="searchForm.start_total_times" size="small" clearable></el-input>
                    </el-col>
                    <el-col class="line" :span="2" style="text-align: center;">-</el-col>
                    <el-col :span="11">
                        <el-input v-model="searchForm.end_total_times" size="small" clearable></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="消费金额">
                    <el-col :span="11">
                        <el-input v-model="searchForm.start_total_spend" size="small" clearable></el-input>
                    </el-col>
                    <el-col class="line" :span="2" style="text-align: center;">-</el-col>
                    <el-col :span="11">
                        <el-input v-model="searchForm.end_total_spend" size="small" clearable></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="注册时间">
                    <el-date-picker
                            size="small"
                            v-model="searchForm.register_time"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="上次访问时间">
                    <el-date-picker
                            size="small"
                            v-model="searchForm.last_visit_time"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" icon="el-icon-search" size="small">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div style="width:100%;height:0;border-bottom:#E4E7ED 1px dashed;margin-bottom: 10px"></div>
        <el-button type="primary" icon="el-icon-plus" size="small" @click="addUser" style="margin-top: 10px">添加用户</el-button>
        <div style="width:100%;height:0;border-bottom:#E4E7ED 1px dashed;margin-top: 10px"></div>
        <el-table
                :data="tableData"
                :row-style="{ height: '57px'}"
                style="width: 100%;font-size: 12px">
            <el-table-column
                    prop="id"
                    label="ID"
                    width="75px">
            </el-table-column>
            <el-table-column
                    prop="vip_level"
                    label="用户等级">
            </el-table-column>
            <el-table-column
                    prop="group.name"
                    label="用户分组">
            </el-table-column>
            <el-table-column
                    prop="nickname"
                    label="昵称">
            </el-table-column>
            <el-table-column
                    label="头像">
                <template slot-scope="scope">
                    <el-image
                        style="width: 30px; height: 30px"
                        :src="scope.row.avatar"></el-image>
                </template>
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="手机号">
            </el-table-column>
            <el-table-column
                    label="状态"
                    width="100px">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.status == 1">启用</el-tag>
                    <el-tag type="danger" v-if="scope.row.status == 2">禁用</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="last_visit_time"
                    label="上次访问时间">
            </el-table-column>
            <el-table-column
                    prop="register_time"
                    label="注册时间">
            </el-table-column>
            <el-table-column
                    label="操作"
                    fixed="right">
                <template slot-scope="scope">
                    <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="handleBalance(scope.row)" type="text" size="small">修改余额</el-button>
                    <el-button @click="handleSetAgent(scope.row)" type="text" size="small" v-if="scope.row.is_agent == 2 && agent">设为分销员</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="page-div" style="margin-top: 20px">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="searchForm.limit"
                    @current-change="pageChangeHandle"
                    :total="page.total">
            </el-pagination>
        </div>
    </el-card>

    <!-- 用户新增/编辑 -->
    <el-dialog
        title="用户管理"
        :visible.sync="userDialogVisible"
        destroy-on-close
        :close-on-click-modal="false"
        width="800px">
        {include file="/user/save"}
    </el-dialog>

    <!-- 操作余额 -->
    <el-dialog
            title="更改余额"
            :visible.sync="balanceDialogVisible"
            destroy-on-close
            :close-on-click-modal="false"
            width="500px">
        {include file="/user/balance"}
    </el-dialog>

    <el-dialog title="" :visible.sync="dialogVisible" width="1200px" class="image-check-dialog">
        <file-select :need-select="true" @selected-img="selectedImg" @close-dialog="dialogVisible=false" :select-num="1"></file-select>
    </el-dialog>
</div>
<script>

    new Vue({
        el: '#app',
        data: function () {
            return {
                pageLoading: true,
                balanceDialogVisible: false,
                dialogVisible: false,
                userDialogVisible: false,
                level: {},
                group: {},
                source: {},
                label: {},
                baseIndex: '/{:config("shop.backend_index")}/',
                searchForm: {
                    level_id: '',
                    group_id: '',
                    label_id: '',
                    phone: '',
                    nickname: '',
                    start_total_times: '',
                    end_total_times: '',
                    start_total_spend: '',
                    end_total_spend: '',
                    register_time: '',
                    last_visit_time: '',
                    source_id: '',
                    page: 1,
                    limit: 10
                },
                form: {
                    id: 0,
                    nickname: '',
                    password: '',
                    phone: '',
                    register_time: '',
                    status: 1,
                    avatar: '',
                    email: '',
                    real_name: '',
                    vip_level: '',
                    group_id: '',
                    source_id: '',
                    birthday: '',
                    id_card: '',
                    integral: 0,
                    address: ''
                },
                rules: {
                    nickname: [
                        { required: true, message: '请输入昵称', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '请输入手机号', trigger: 'blur' }
                    ],
                    register_time: [
                        { required: true, message: '请输入注册时间', trigger: 'blur' }
                    ],
                    status: [
                        { required: true, message: '请选择状态', trigger: 'blur' }
                    ],
                },
                page: {
                    total: 0
                },
                tableData: [],
                mode: 'add',
                formKey: Date.parse(new Date()),
                balanceForm: {
                    user_id: 0,
                    type: '1',
                    balance: 0
                },
                agent: false // 是否开启分销
            }
        },
        mounted() {
            this.getList()
            this.pageLoading = false
        },
        methods: {
            async getList() {
                let res = await request.get(this.baseIndex + "user/index", this.searchForm)

                this.level = res.data.base.level
                this.group = res.data.base.group
                this.source = res.data.base.source
                this.label = res.data.label

                this.tableData = res.data.list.data
                this.page.total = res.data.list.total

                this.agent = res.data.agent
            },
            // 初始化表单
            initForm() {
                this.form = this.$options.data().form
            },
            // 搜索
            onSubmit() {
                this.searchForm.page = 1
                this.getList()
            },
            // 编辑
            handleEdit(item) {
                this.mode = 'edit'
                delete this.rules.password
                this.formKey = Date.parse(new Date())

                this.form.id = item.id
                this.form.nickname = item.nickname
                this.form.phone = item.phone
                this.form.register_time = item.register_time
                this.form.status = item.status
                this.form.avatar = item.avatar
                this.form.email = item.email
                this.form.real_name = item.real_name
                this.form.vip_level = (item.vip_level == 0) ? '' : item.vip_level
                this.form.group_id = (item.group_id == 0) ? '' : item.group_id
                this.form.source_id = (item.source_id == 0) ? '' : item.source_id + ''
                this.form.birthday = item.birthday
                this.form.id_card = item.id_card
                this.form.integral = item.integral
                this.form.address = item.address

                this.$nextTick(() => {
                    this.userDialogVisible = true
                });
            },
            // 修改余额
            handleBalance(item) {
                this.balanceForm.user_id = item.id
                this.balanceForm.now_balance = item.balance
                this.balanceDialogVisible = true
            },
            // 选择状态
            checkTab(type) {
                this.searchForm.source_id = type
                this.searchForm.page = 1
                this.getList()
            },
            // 翻页
            pageChangeHandle(page) {
                this.searchForm.page = page
                this.getList()
            },
            // 添加用户
            addUser() {
                this.mode = 'add'
                this.initForm()
                this.rules.password = [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ]
                this.formKey = Date.parse(new Date())
                this.$nextTick(() => {
                    this.userDialogVisible = true
                });
            },
            // 选资源
            showImage() {
                this.dialogVisible = true
            },
            selectedImg(file) {
                this.form.avatar = file[0].url
                this.dialogVisible = false
            },
            // 移除图片
            removeImg() {
                this.form.avatar = ''
            },
            // 提交表单
            submitForm(formName) {
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        let res;
                        if (this.mode == 'add') {
                            res = await request.post(this.baseIndex + "user/add", this.form)
                        } else {
                            res = await request.post(this.baseIndex + "user/edit", this.form)
                        }

                        if (res.code == 0) {
                            this.$message.success(res.msg)
                            this.userDialogVisible = false
                            this.getList()
                        } else {
                            this.$message.error(res.msg)
                        }
                    }
                });
            },
            // 更改余额
            submitBalanceForm(formName) {
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        let res = await request.post(this.baseIndex + "user/balance", this.balanceForm)

                        if (res.code == 0) {
                            this.$message.success(res.msg)
                            this.balanceDialogVisible = false
                            this.balanceForm.balance = 0
                            this.getList()
                        } else {
                            this.$message.error(res.msg)
                        }
                    }
                });
            },
            // 设置分销员
            handleSetAgent(row) {
                this.$confirm('此操作将该用户设置为推广员, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let res = await request.post("/addons/agent/admin.agentUser/set", {user_id: row.id})
                    if (res.code == 0) {
                        this.$message.success(res.msg)
                        this.getList()
                    } else {
                        this.$message.error(res.msg)
                    }
                }).catch(() => {});
            }
        }
    })
</script>
<style>
    .search-box .el-form-item {
        margin-bottom: 10px !important;
    }

    .el-table__row td {
        height: 57px !important;
    }

    .primary {
        color: #FFF;
        background-color: #409EFF;
        border-color: #409EFF;
    }
    .img-list {
        height: 60px;
        padding-left: 0;
        margin-top: 0;
    }
    .img-list li:first-child {
        margin-left: 0;
    }
    .img-list li {
        width: 58px;
        height: 58px;
        float: left;
        margin-left: 5px;
        cursor: pointer;
        position: relative;
    }
    .addImg {
        height: 56px;
        width: 56px;
        line-height: 56px;
        text-align: center;
        border: 1px dashed rgb(221, 221, 221);
    }
    ul li {list-style: none}
    .image-check-dialog .el-dialog__header {display: none}
    .image-check-dialog .el-dialog__body {padding: 0;}
    .img-list .img-tools {
        position: absolute;
        width: 58px;
        height: 15px;
        line-height: 15px;
        text-align: center;
        top: 43px;
        background: rgba(0, 0, 0, 0.6);
        cursor: pointer;
    }
</style>
</body>
</html>